<template>
	<view>
		<view class="cu-form-group margin-top">
			<view class="title">{{i18n.addaddress2.method}}</view>
			<u-picker mode="selector" v-model="show" @confirm="pickconfirm" :range="picker" range-key="name"
				@columnchange="columnchange" cancelText="Cancel" confirmText="Confirm"></u-picker>
			<view class="picker" @tap="show = true">
				{{picker[index].name}}
			</view>
			<!-- <picker @change="PickerChange" :value="index" :range="picker" range-key="name">
				<view class="picker">
					{{picker[index].name}}
				</view>
			</picker> -->
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">{{i18n.addaddress2.username}}</view>
			<input class="text" :placeholder="i18n.addaddress2.inputusername" v-model="form.username"></input>
		</view> -->

		<view class="cu-form-group" v-if="form.type==1">
			<view class="title">{{i18n.addaddress2.alipayaddr}}</view>
			<input type="text" :placeholder="i18n.addaddress2.inputalipayaddr" v-model="form.address"></input>
		</view>

		<view class="cu-form-group" v-if="form.type==2">
			<view class="title">{{i18n.addaddress2.wechartaddr}}</view>
			<input type="text" :placeholder="i18n.addaddress2.inputwechartaddr" v-model="form.address"></input>
		</view>
		<view class="cu-form-group" v-if="form.type==4">
			<view class="title">ERC20</view>
			<input type="text" :placeholder="i18n.addaddress2.inputimtoken" v-model="form.address"></input>
		</view>
		<view class="cu-form-group" v-if="form.type==5">
			<view class="title">TRC20</view>
			<input type="text" :placeholder="i18n.addaddress2.inputimtoken" v-model="form.address"></input>
		</view>
		<block v-if="form.type > 5">
			<view class="cu-form-group" >
				<view class="title">{{ i18n.addaddress2.username }}</view>
				<input type="text" :placeholder="i18n.addaddress2.inputusername" v-model="form.username"></input>
			</view>
			<view class="cu-form-group" >
				<view class="title">{{ i18n.addaddress2.bank }}</view>
				<input type="text" :placeholder="i18n.addaddress2.inputbank" v-model="form.bank"></input>
			</view>
			<view class="cu-form-group" >
				<view class="title">{{ i18n.addaddress2.bankaddr }}</view>
				<input type="text" :placeholder="i18n.addaddress2.inputbankaddr" v-model="form.bank_card_no"></input>
			</view>
		</block>
		<view class="cu-bar bg-white margin-top" v-if="form.type==1 || form.type==2 || form.type==4 || form.type==5">
			<view class="action">
				{{i18n.addaddress2.pic}}
			</view>
			<!-- <view class="action">
						{{imgList.length}}/4
					</view> -->
		</view>
		<view class="cu-form-group" v-if="form.type==1 || form.type==2 || form.type==4 || form.type==5">
			<view class="grid col-1 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					:data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<!-- style="margin: 15px auto;" -->
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>

		<view class="cu-form-group" v-if="form.type==3">
			<view class="title">{{i18n.addaddress2.bank}}</view>
			<input class="text" :placeholder="i18n.addaddress2.inputbank" v-model="form.bank"></input>
		</view>
		<view class="cu-form-group" v-if="form.type==3">
			<view class="title">{{i18n.addaddress2.bank2}}</view>
			<input type="text" :placeholder="i18n.addaddress2.inputbank2" v-model="form.bank2"></input>
		</view>
		<view class="cu-form-group" v-if="form.type==3">
			<view class="title">{{i18n.addaddress2.bankaddr}}</view>
			<input type="number" :placeholder="i18n.addaddress2.inputbankaddr" v-model="form.address"></input>
		</view>

		<view class="cu-form-group" v-if="iscdoe==1">
			<view class="title">{{i18n.addaddress2.mobile}}</view>
			<input type="number" :value="userinfo.mobile" disabled="disabled"></input>
		</view>
		<view class="cu-form-group" v-if="iscdoe==1">
			<view class="title">{{i18n.addaddress2.code}}</view>
			<input type="number" :placeholder="i18n.addaddress2.inputcode" v-model="code"></input>
			<button class='cu-btn bg-yellow round' @tap="getCode">{{getCodeText}}</button>
		</view>
		<view class="cu-form-group">
			<view class="title">{{i18n.addaddress2.default}}</view>
			<switch @change="switchChange" :class="form.is_default == 1 ?'checked':''" :checked="form.is_default == 1">
			</switch>
		</view>

		<view class="cu-form-group">
			<view class="padding flex flex-direction " style="
    width: -webkit-fill-available;
">
				<button class="cu-btn bg-yellow lg" @click="confirm">{{i18n.addaddress2.confirm}}</button>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';

	export default {
		data() {
			return {
				// picker: ['支付宝', '微信支付', '银行卡','imtoken'], 
				type2: '',
				index: 0,
				code: '',
				imgList: [],
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				form: {
					type: 1,
					username: '',//姓名
					address: '',
					// mobile: this.userinfo.mobile,
					// code: '',
					bank: '',//银行
					bank_card_no:'',//卡号
					bank2: '',
					is_default: 1,
					image: ''
				},
				iscdoe: 0, //是否需要验证码
				show: false,
				user_id:0,
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			i18n() {
				return this.$t('message');
			},
			picker() {
				let re = [];

				for (let key in this.myconfig.tx_ways) {

					re.push({
						'id': key,
						'name': this.myconfig.tx_ways[key]
					})
				}
				return re
			},
		},
		onLoad(option) {
			let title = this.i18n.addaddress2.add;
			this.form.type = this.picker[0].id;
			
			if (option.type === 'edit') {
				title = this.i18n.addaddress2.edit
				this.form = JSON.parse(option.data)
				this.imgList.push(this.form.image);
				this.index = this.form.type - 4;
				// console.log(this.form)
			}
			this.type2 = this.picker[0].name;
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
			this.getCodeText = this.i18n.login.getcode;
			this.user_id = uni.getStorageSync('user_id');
			// console.log('111111111111111111')
			// console.log(this.picker)
			// this.getAreas()
		},
		methods: {
			...mapActions(['getUserPayment', 'getAreas']),
			pickconfirm(e) {
				console.log('pickconfirm', e[0]);
				this.index = e[0]
				this.form.type = this.picker[this.index].id;
				this.type2 = this.picker[this.index].name
			},
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userinfo.mobile))) {
					this.$api.msg(this.i18n.popup.errmobile);
					return;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get', {
					mobile: this.userinfo.mobile,
					event: 'addpay'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = this.i18n.login.Reacquire + "(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = this.i18n.login.getcode;
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = this.i18n.login.Reacquire + "(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			switchChange(e) {
				this.form.is_default = e.detail.value ? 1 : 0;
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// uni.getFileInfo({
						// 	filePath: res.tempFilePaths[0],
						// 	success: function(res) {
						// 		console.log(res.size / 1024 + 'Kb');
						// 	} 
						// });
						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList.push(res.tempFilePaths[0]);
									this.form.image = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm3,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.form.image = '';
						}
					}
				})
			},
			PickerChange(e) {
				this.index = e.detail.value;
				this.form.type = this.picker[this.index].id;
				this.type2 = this.picker[this.index].name
				// this.type2 = this.picker[e.detail.value];

			},
			//提交
			confirm() {

				// if (!this.form.username) {
				// 	this.$api.msg(this.i18n.addaddress2.inputusername);
				// 	return;
				// }
				if (this.iscdoe) {
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userinfo.mobile))) {
						this.$api.msg(this.i18n.popup.errmobile);
						return;
					}
					if (!this.code) {
						this.$api.msg(this.i18n.addaddress2.inputcode);
						return;
					}
					this.form.code = this.code;
					this.form.mobile = this.userinfo.mobile;
				}

				if (!this.form.address && (this.form.type == 4 || this.form.type == 5)) {
					this.$api.msg(this.i18n.addaddress2.inputaddr);
					return;
				}
				if (this.form.type == 3) {
					if (!this.form.bank) {
						this.$api.msg(this.i18n.addaddress2.inputbank);
						return;
					}
				}
				if (this.form.type == 1 || this.form.type == 2) {

					if (!this.form.image) {
						this.$api.msg(this.i18n.addaddress2.pic);
						return;
					}
				}


				this.$http.post('user.payment.edit', this.form).then(res => {
					this.$api.msg(this.i18n.popup.success);
					// this.$api.msg(`收款方式${this.manageType=='edit' ? '修改': '添加'}成功`);
					this.getUserPayment()
					setTimeout(() => {
						this.$api.prePage()
					}, 800)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
	}
</style>
